.handle {
	position: absolute;
	top: 0;
	right: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	cursor: pointer;
	background: rgb(0 0 0 / 70%);
	opacity: 0;
	transition: var(--el-transition-duration-fast);
	.preview-btn {
		position: absolute;
		top: 50%;
		left: 50%;
		color: #ffffff;
		background-color: var(--el-color-primary);
		transform: translate(-50%, -50%);
		span {
			padding-left: 10px;
		}
	}
	.right-btn {
		position: absolute;
		top: 0;
		right: 10px;
		.el-link:hover {
			opacity: 0.8;
		}
		.el-link {
			padding: 10px;
			i {
				color: #e8e8e8;
			}
		}
	}
}
.applet-page {
	.table-header {
		margin-bottom: 15px;
	}
	.applet-card {
		position: relative;
		padding: 15px 30px;
		&:hover {
			border-color: var(--el-color-primary);

			// .bg,
			// .body .el-image {
			// 	animation: scale-img 5s ease-in-out infinite;
			// }
			.handle {
				z-index: 1;
				opacity: 1;
			}
		}
		.title {
			align-items: center;
			height: 48px;
			padding-top: 5px;
			.name {
				font-size: 18px;
				font-weight: 700;
				line-height: 48px;
				color: #555555;
			}
		}
		.body {
			height: 110px;
			overflow: hidden;
			line-height: 25px;
			text-overflow: ellipsis;
			white-space: pre-wrap;
			.tips {
				flex: 1;
				padding: 15px 0;
				color: #777777;
			}
			.bg {
				position: relative;
				width: 100px;
				min-width: 100px;
				height: 100%;
				background-image: url("../../assets/images/applet/bg-applet.png");
				background-repeat: no-repeat;
				background-position: 100% 100%;
				background-size: contain;
				.img {
					position: absolute;
					top: 35px;
					right: 4px;
					bottom: 18px;
					left: 4px;
				}
			}
		}
		.tags {
			padding: 15px 0;
			> * {
				color: red;
			}
		}
		.bg.applet-card-bg0 {
			background-image: url("../../../public/images/decoration/O1CN01BXsUyY21uf4e3gexj_!!6000000007045-0-tps-696-560.png");
		}
		.bg.applet-card-bg1 {
			background-image: url("../../../public/images/decoration/O1CN01ITtXV51IIVMky9z8O_!!6000000000870-0-tps-696-560.png");
		}
		.bg.applet-card-bg2 {
			background-image: url("../../../public/images/decoration/O1CN01meFyRl1JAY6TML0Wd_!!6000000000988-0-tps-696-560.png");
		}
		.bg.applet-card-bg3 {
			background-image: url("../../../public/images/decoration/O1CN01mVn4O81OrD4h6t15r_!!6000000001758-0-tps-696-560.png");
		}
		.bg.applet-card-bg4 {
			background-image: url("../../../public/images/decoration/O1CN01nybDLA1qOdbieY1aG_!!6000000005486-0-tps-696-560.png");
		}
		.bg.applet-card-bg5 {
			background-image: url("../../../public/images/decoration/O1CN01pgFgsH1CNe7RZJtSW_!!6000000000069-0-tps-696-560.png");
		}
		.applet-card-bg6 {
			background-image: url("../../../public/images/decoration/O1CN013Ca3bI1HJ8IAKFuml_!!6000000000736-0-tps-696-560.png");
		}
	}
	@keyframes scale-img {
		0% {
			transform: scale(1);
		}
		25% {
			transform: scale(1.2);
		}
		50% {
			transform: scale(1);
		}
		75% {
			transform: scale(1.2);
		}
	}
}
.applet-type {
	width: 25px;
	height: 25px;
	margin-right: 15px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}
.applet-type.applet {
	width: 20px;
	height: 20px;
	margin-left: 3px;
	background-image: url("../../assets/images/applet/applet.png");
}
.applet-type.docker {
	background-image: url("../../assets/images/applet/docker.png");
}
